<template>
  <div class="home">
    <mu-row>
      <mu-col width="100" desktop="100">
        <mu-appbar title="木木联盟自助中心" style="background:rgba(90,93,91,0.92);">
          <mu-icon-menu icon="help" slot="right" @item-click="todo">
            <mu-menu-item title="老系统下单" value="old_plat"/>
            <mu-menu-item title="帮助" value="help"/>
          </mu-icon-menu>
        </mu-appbar>
        <!--公告信息栏-->
        <div class="notice">
          商家名称：{{shopInfo.shopName}}<br>
          联系方式：{{shopInfo.shopContact}}<br>
          公告：{{shopInfo.shopNotice}}<br>
        </div>
        <!--选择商品属性-->
        <div class="goods">
          <mu-paper class="content-card" :zDepth="3">
            <!--<div class="card-title">
              1.选择商品
            </div>-->
            <mu-select-field class="form-item" @change="typeSelect" style="width: 93%" label="选择商品分类">
              <mu-menu-item v-for="item in goodsTypeList" :key="item.sequence" :value="item.id"
                            :title="item.category"/>
            </mu-select-field>
            <mu-select-field v-model="order.goodsId" @change="goodsSelect" class="form-item" style="width: 93%"
                             label="选择商品">
              <mu-menu-item v-for="goods in goodsList" :key="goods.goodsId" :value="goods.goodsId"
                            :title="goods.goodsName"/>
            </mu-select-field>
            <mu-text-field label="商品单价" v-model="order.orderPrice" disabled class="form-item"
                           style="width: 93%;color:red"
                           type="text"/>
            <br/>
            <mu-text-field label="请输入商品数量" class="form-item" v-model="order.goodsQuantity" style="width: 93%"
                           type="number"/>
            <br/>
            <mu-text-field label="联系方式" class="form-item" v-model="order.payer" style="width: 93%"
                           hintText="推荐填写QQ号或手机号,作为查单的凭据"/>
            <br/>
            <mu-text-field v-if="yinliu" label="引流地址" class="form-item" v-model="order.extraInfo.yinliu_url"
                           style="width: 93%"
                           hintText="请填写淘宝复制的链接" multiLine :rows="3"/>
            <br/>
            <mu-text-field v-if="chargeWallet" label="充值账户" class="form-item" v-model="order.extraInfo.account"
                           style="width: 93%"
                           hintText="请填写您的登录账号"/>
            <br/>

          </mu-paper>
          <mu-raised-button label="提交订单" backgroundColor="rgb(211,168,9)" @click="openPayWay" primary fullWidth/>
          <mu-bottom-sheet :open="bottomSheet" @close="closeBottomSheet">
            <mu-list @itemClick="pay">
              <mu-sub-header>
                请选择一种支付方式
              </mu-sub-header>
              <mu-list-item title="支付宝(请用浏览器打开)" value="alipay"/>
              <mu-list-item title="微信(暂不支持)" value="wxpay"/>
            </mu-list>
          </mu-bottom-sheet>

        </div>
      </mu-col>
    </mu-row>

    <mu-dialog :open="dialog" title="提醒">
      你有选项忘了填啦~~~
      <mu-flat-button label="确定" slot="actions" primary @click="close"/>
    </mu-dialog>
  </div>
</template>

<script>
  import {alipay, wxpay, getGoodsType, getGoodsByTypeId, getShopInfo} from "../api/api";

  export default {
    data() {
      return {
        dialog: false,
        chargeWallet: false,
        yinliu: false,
        price: '0.00' + '￥',
        bottomSheet: false,
        merchantInfo: {
          shopName: '淘宝联盟引流',
          contack: 'qq:979783618',
          notice: '有问题联系客服qq:979783618,有问题联系客服qq:979783618,有问题联系客服qq:979783618，有问题联系客服qq:979783618'
        },
        goodsTypeList: [],
        order: {
          goodsId: null,
          goodsName: null,
          orderPrice: 0,
          goodsQuantity: 1,
          payer: null,
          extraInfo: {}
        },
        goodsList: [],
        shopInfo: {}
      }
    },
    methods: {
      close() {
        this.dialog = false
      },
      getShopInfo() {
        getShopInfo(null).then(res => {
          this.shopInfo = res.data.data
        })
      },
      showBusiness() {

        if (this.order.goodsId === 1) {
          //引流业务
          this.yinliu = true
        }
        if (this.order.goodsId === 9) {
          //充值业务，100￥
          this.chargeWallet = true
        }
      },
      goodsSelect(value) {
        let goodsInfo = {}
        this.goodsList.forEach(k => {
          if (k.goodsId === value) {
            goodsInfo = JSON.parse(JSON.stringify(k))
          }
        })

        this.order.goodsId = goodsInfo.goodsId
        this.order.goodsName = goodsInfo.goodsName
        this.order.orderPrice = goodsInfo.price
        //隐藏所有业务附加信息输入框
        this.yinliu = false
        this.chargeWallet = false
        this.showBusiness()
      },
      typeSelect(value) {
        this.order = {
          goodsId: null,
          goodsName: '',
          orderPrice: '0',
          goodsQuantity: 1,
          payer: null,
          extraInfo: {}
        }
        let params = {
          type_id: value
        }
        getGoodsByTypeId(params).then(res => {
          console.log(res)
          this.goodsList = res.data.data
        })
      },
      getGoodsType() {
        getGoodsType().then(res => {
          this.goodsTypeList = res.data.data
        })
      },
      getGoodsByTypeId() {

      },
      todo(menu) {
        if (menu.value === 'help') {
          this.$router.push({name: 'help'})
        }
        if (menu.value === 'query') {
          this.$router.push({name: 'query'})
        }

        if (menu.value === 'old_plat') {
          window.open("http://www.yinliuren.com:8082")
        }
      },
      openPayWay() {
        if (this.order.goodsId === null || this.order.goodsQuantity === 0 || this.order.payer === null) {
          this.dialog = true
          return
        }

        if (this.order.goodsId === 11) {
          //京东接码
          this.order.extraInfo = {
            "type":"jingdong"
          }
        }
        if (JSON.stringify(this.order.extraInfo) === "{}") {
          this.dialog = true
          return
        }
        if (this.order.goodsId === 1) {
          this.generateUrl()
        }
        this.bottomSheet = true
      },
      closeBottomSheet() {
        this.bottomSheet = false
      },
      generateUrl: function () {
        var s = this.order.extraInfo.yinliu_url;
        if (s === '') {
          alert("引流链接不能为空")
          return;
        }
        if (s.indexOf("券") > 0) {
          alert("连接不符合要求，分享商品不能带券");
          return;
        }
        if (s.indexOf("￥") < 0) {
          alert("您的文案经过变动，请勿变动文案");
          return;
        }

        var n = s.search('http');
        //nsole.log(n)
        var urls = s.substring(n, n + 40)
        var url2 = this.removeChinese(urls)
        if (confirm('确认商品链接不是粉丝购，即不带优惠券。带优惠券会引流失败。')) {

        } else {
          return;
        }
        this.order.extraInfo.yinliu_url = url2.substring(0, url2.indexOf('-'))
      },
      removeChinese: function (strValue) {
        if (strValue != null && strValue != "") {
          var reg = /[\u4e00-\u9fa5]/g;
          return strValue.replace(reg, "");
        }
        else
          return "";
      },
      pay(e) {
        //引流地址截取

        if (e.value === 'alipay') {
          //支付宝支付
          alipay(this.order).then(res => {
            this.bottomSheet = false
            document.open();
            document.write(res.data.data)
            document.close()
          }).catch(error => {
            alert("网络连接失败，请稍后重试")
          })
        }
        if (e.value === 'wxpay') {
          //微信支付
          alipay(this.order).then(res => {
            this.bottomSheet = false
            document.open();
            document.write(res.data.data)
            document.close()
          }).catch(error => {
            alert("网络连接失败，请稍后重试")
          })
        }
      }
    },
    mounted() {
      this.getGoodsType()
      this.getShopInfo()
    }
  }
</script>

<style scoped>
  .home {
    margin-bottom: 60px;
    background: rgb(211, 168, 9);
  }

  /* @media (min-width: 993px) {
     .row .desktop-50 {
       !*display: flex;*!
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
     }

   }*/

  .slider {
    margin: 8px;
  }

  .form-item {
    margin: 10px;
  }

  .notice {
    padding: 8px;

    color: white;
  }

  .mu-appbar-title {
    display: flex !important;
  }

  .goods {
  / / background: rgb(211, 168, 9);
    padding: 5px;
  }

  .card-title {
    height: 40px;
    background: rgba(0, 0, 0, .38);
    border-radius: 2px;
    line-height: 40px;
    padding-left: 10px;
    color: rgb(255, 255, 255)
  }

  .content-card {
    margin-bottom: 10px;
    /*height: 300px;*/
    /*display: flex;*/
    /*width: 95%;*/
  }

  .fix-bottom {
    position: fixed !important;
    bottom: 0px;
  }
</style>
